.base {
  background-color: var(--theme-stage);
  height: var(--nav-bottom-bar-height);

  .toolbar {
    align-items: center;
    display: flex;
    width: 100%;
  }
  .toolbar > * {
    flex-grow: 1;
  }
  .toolbarItem {
    align-items: center;
    color: var(--theme-stage-on);
    display: flex;
    height: var(--nav-bottom-bar-height);
    justify-content: center;
    position: relative;

    .status {
      background-color: var(--theme-status-active);
      border-radius: 8px;
      bottom: 8px;
      color: var(--theme-status-active-on);
      font-size: 11px;
      height: 16px;
      padding: 0 6px;
      position: absolute;
      right: 16px;
      white-space: nowrap;
    }
  }
  .toolbarItem.active {
    background-color: var(--theme-stage-strong);
    color: var(--theme-stage-on-strong);
  }
  .user {
    padding: 9px 16px;
  }
  .newWorkspaceIcon {
    display: flex;
    place-content: center;
    width: var(--icon-large);
  }
}
